<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>

			<el-form :inline="true" :model="GetUserListPara" class="demo-form-inline">
				<el-form-item label="用户名">
					<el-input v-model="GetUserListPara.userName" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item label="起止时间">
					<el-date-picker v-model="GetUserListPara.beginDate" type="date" placeholder="开始时间">
					</el-date-picker>
					<el-date-picker v-model="GetUserListPara.endDate" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>


				<el-form-item label="是否锁定">
					<el-select v-model="GetUserListPara.isLock" placeholder="活动区域">
						<el-option label="请选择" value=""></el-option>
						<el-option label="是" value="是"></el-option>
						<el-option label="否" value="否"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="排序">
					<el-select v-model="GetUserListPara.orderBy" placeholder="活动区域">
						<el-option label="请选择" value=""></el-option>
						<el-option label="创建时间" value="CreateTime"></el-option>
						<el-option label="最后登录" value="LastLoginTime"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="SearchClick">搜索</el-button>
					<el-button type="primary" @click="addDialogVisible=true">添加</el-button>
				</el-form-item>
			</el-form>
			<!-- 用户列表区 -->
			<el-table :data="userlist" border stripe>
				<el-table-column type="index"></el-table-column>
				<el-table-column label="用户名" prop="LoginName"></el-table-column>
				<el-table-column label="邮箱" prop="ProtectEmail"></el-table-column>
				<el-table-column label="手机号" prop="ProtectMTel"></el-table-column>
				<el-table-column label="是否锁定" prop="IsLockout"></el-table-column>
				<el-table-column label="创建时间" prop="CreateTime"></el-table-column>

				<el-table-column label="最后登录时间" prop="LastLoginTime"></el-table-column>

				<!-- <el-table-column label="是否锁定" prop="lock"></el-table-column> -->


				<el-table-column label="是否锁定">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180px">
					<template slot-scope="scope">

						<!-- 角色按钮   -->
						<el-button plain size="mini" @click="GetRoleListAll(scope.row.Id)">角色</el-button>
						<!-- 修改按钮 -->
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.Id)">
						</el-button>
						<!-- 删除按钮 -->
						<el-button type="danger" icon="el-icon-delete" size="mini"
							@click="removeUserById(scope.row.Id)"></el-button>
						<!-- 分配角色按钮 -->
						<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
							<el-button type="warning" icon="el-icon-setting" size="mini"
								@click="GetRoleListAll(scope.row.Id)">
							</el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<!--                      分页区域                       -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum" :page-sizes="[ 3, 5, 10]" :page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		<!-- 添加用户对话框 -->
		<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
			<!-- 内容主体区 -->
			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="addForm.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="addForm.password"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="addForm.email"></el-input>
				</el-form-item>
				<el-form-item label="手机" prop="mobile">
					<el-input v-model="addForm.mobile"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改用户对话框 -->
		<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="editForm.LoginName" disabled></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="ProtectEmail">
					<el-input v-model="editForm.ProtectEmail"></el-input>
				</el-form-item>
				<el-form-item label="手机" prop="ProtectMTel">
					<el-input v-model="editForm.ProtectMTel"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editUserInfo">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 分配角色对话框 -->
		<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed">
			<div>
				<p>当前的用户:{{ userInfo.username }}</p>
				<p>当前的角色:{{ userInfo.role_name }}</p>
				<p>
					分配新角色:
					<el-select v-model="selectedRoleId" placeholder="请选择">
						<el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id">
						</el-option>
					</el-select>
				</p>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="setRoleDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
			</span>
		</el-dialog>






		<!-- 角色设置对话框  穿梭框 -->

		<el-dialog @close="TransferClose" title="正在为？？？用户设置角色" :visible.sync="dialogSetRolesVisible" width="550px">
			<template>
				<el-transfer v-model="value1" @left-check-change="LeftCilck" @change="TestClick()"
					@right-check-change="RightClick" :data="Transferdata"></el-transfer>
			</template>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogSetRolesVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogSetRolesVisible = false">确 定</el-button> -->
			</span>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			const generateData = _ => {
				const data = [];

				for (let i = 1; i <= 15; i++) {
					data.push({
						key: i,
						label: `备选项 ${ i }`,
						disabled: i % 4 === 0
					});
				}
				return data;
			};
			//验证邮箱规则
			var checkEmail = (rule, value, cb) => {
				const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
				if (regEmail.test(value)) {
					//合法的邮箱
					return cb()
				}
				cb(new Error('请输入合法的邮箱'))
			}
			//验证手机规则
			var checkMobile = (rule, value, cb) => {
				const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
				if (regMobile.test(value)) {
					return cb()
				}
				cb(new Error('请输入合法手机号'))
			}
			return {
				//用户id
				Uid: "",

				form: {},
				formInline: {},

				//  多条件查询区域 的表单数据 
				GetUserListPara: {

					limit: 3,
					page: 1,
					orderBy: "",
					userName: "",
					beginDate: "",
					endDate: "",
					isLock: "",
					// ?token="283e105a-79a3-4130-99f7-ffd3e9d4078d"
				},


				//穿梭框，数据源
				Transferdata: [],
				value1: [],

				AddRoleIds: [],
				RomoveRoleIds: [],


				//设置角色对话框
				dialogSetRolesVisible: false,
				// 所有角色列表数据源
				RoleList: [],



				//一般来说跟请求数据公用一个接口
				queryInfo: {
					query: '',
					//当前页数
					pagenum: 1,
					//当前每页显示多少条数据
					pagesize: 2,
					//用户名
					//开始时间
					//结束时间
					//是否锁定
					//排序字段

				},
				userlist: [],
				total: 0,
				addDialogVisible: false,
				//添加用户的表单数据
				addForm: {
					username: '',
					password: '123123',
					email: '123@qq.com',
					mobile: '13999999999'
				},
				//添加表单验证规则对象
				addFormRules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '用户名的长度在3~10个字符之间',
							trigger: 'blur',
						},
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 15,
							message: '用户名的长度在6~15个字符之间',
							trigger: 'blur',
						},
					],
					email: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						{
							validator: checkEmail,
							trigger: 'blur'
						},
					],
					mobile: [{
							required: true,
							message: '请输入手机',
							trigger: 'blur'
						},
						{
							validator: checkMobile,
							trigger: 'blur'
						},
					],
				},
				//控制修改用户对话框的显示与隐藏
				editDialogVisible: false,
				//查询到的用户信息对象
				editForm: {},
				editFormRules: {
					ProtectEmail: [{
							required: true,
							message: '请输入用户邮箱',
							trigger: 'blur'
						},
						{
							validator: checkEmail,
							trigger: 'blur'
						},
					],
					ProtectMTel: [{
							required: true,
							message: '请输入用户手机',
							trigger: 'blur'
						},
						{
							validator: checkMobile,
							trigger: 'blur'
						},
					],
				},
				//控制分配角色对话框的显示与隐藏
				setRoleDialogVisible: false,
				//需要被分配角色的用户信息
				userInfo: {},
				//所有角色的数据列表
				rolesList: [],
				//已选中的角色Id值
				selectedRoleId: '',
			}
		},
		created() {
			this.getUserList()
		},
		methods: {
			//分页 limit
			handleSizeChange(newSize) {
				//console.log(newSize)
				this.GetUserListPara.limit = newSize
				this.getUserList()
			},
			//分页 page
			handleCurrentChange(newPage) {
				console.log(newPage)
				this.GetUserListPara.page = newPage
				this.getUserList()
			},
			//搜索按钮所调用的   单击事件
			SearchClick() {
				this.getUserList();
			},
			//获取所有的用户列表
			async getUserList() {
				const {
					data: res
				} = await this.$http.post('/api/api/GetUsersLayUI', this
					.GetUserListPara)
				console.log("用户列表===================");
				console.log(res);
				console.log(res.data);
				if (res.code !== 0) {
					return this.$message.error('获取用户列表失败!')
				}
				this.userlist = res.data
				this.total = res.count
				console.log(res)
			},
			//添加用户
			addUser() {
				this.$refs.addFormRef.validate(async (valid) => {
					if (!valid) return
					//可以发起添加用户的网络请求
					const {
						data: res
					} = await this.$http.post(
						'/api/api/CreateUser', {
							loginName: this.addForm.username,
							pwd: this.addForm.password,
							email: this.addForm.email,
							mtel: this.addForm.mobile
						})

					if (res.code !== 0) {
						this.$message.error('添加用户失败!')
					}
					this.$message.success('添加用户成功!')
					//隐藏添加用户对话框
					this.addDialogVisible = false
					//重新获取用户列表数据
					this.getUserList()
				})
			},
			//监听添加用户对话框的关闭事件
			addDialogClosed() {
				this.$refs.addFormRef.resetFields()
			},
			//根据Id删除对应的用户信息
			async removeUserById(id) {

				const confirmResult = await this.$confirm(
					'此操作将永久删除该用户, 是否继续?',
					'提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).catch((err) => err)
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				const {
					data: res
				} = await this.$http.post(
					'/api/api/DeleteUser', {
						uid: id
					}
				)
				if (!res.code == 0) {
					return this.$message.error('删除用户失败！')
				}
				this.$message.success('删除用户成功！')
				this.getUserList()
			},

			//展示编辑用户对话框  此处有数据回显  根据id 获取相应的数据，对接口要求较低
			async showEditDialog(userId) {
				const {
					data: res
				} = await this.$http.post(
					'/api/api/GetUsersById', {
						id: userId
					}
				)

				if (res.code !== 0) {
					return this.$message.error('获取用户信息失败！')
				}
				this.editForm = res.data;
				this.editDialogVisible = true
			},
			//修改用户信息并提交
			editUserInfo() {
				this.$refs.editFormRef.validate(async (valid) => {
					if (!valid) return
					//发起修改用户信息的数据请求  传入相应的参数，保证参数正确，就可以使用，可能有一些数据不可编辑
					console.log(this.editForm)
					const {
						data: res
					} = await this.$http.post(
						'/api/api/UpdateUser', {
							id: this.editForm.Id,
							ProtectEmail: this.editForm.ProtectEmail,
							ProtectMTel: this.editForm.ProtectMTel,
						}
					)
					if (!res.success) {
						return this.$message.error('更新用户信息失败!')
					}
					//关闭对话框
					this.editDialogVisible = false
					//刷新数据列表
					this.getUserList()
					//提示修改成功
					this.$message.success('更新用户信息成功!')
				})
			},
			//监听修改用户对话框的关闭事件
			editDialogClosed() {
				this.$refs.editFormRef.resetFields()
			},


			/*
			  穿梭框
			  要求是，打开穿梭框的时候能够显示相应的数据
			  需要的数据有 全部的角色列表 直接获取所有的角色即可
			  当前用户拥有的角色 这个需要用户的编号
			  
			  目标列表中的数据项会同步到绑定至 v-model 的data，值为数据项的 key 所组成的数组
			  
			  那我们假定有添加和移除两个按钮，
			  点击的时候都会进行数据更新， 很久选中的数组，添加或移除 
			  */
			//


			//打开分配角色对话框 获取所有的角色列表  显示到左边 获取该用户的角色列表显示到右边 
			async GetRoleListAll(id) {
				this.Uid = id;
				const {
					data: res
				} = await this.$http.post("/api/api/GetRolesAll1", {});
				if (!res.success) {
					return this.$message.error("获取所有角色失败！")
				}
				this.$message.success("获取所有角色成功")
				console.log(res.data)
				for (let i = 0; i < res.count; i++) {
					this.Transferdata.push({
						key: res.data[i].Id,
						label: res.data[i].Name
					});
				}
				const {
					data: res2
				} = await this.$http.post(
					'/api/api/GetRoleByUserId', {
						Id: this.Uid
					}
				);
				console.log(res2.data)
				if (!res2.success) {
					return this.$message.error("获取用户角色失败！")
				}
				this.$message.success("获取用户角色成功！")
				res2.data.forEach((item) => {
					this.value1.push(item)
				})
				console.log("this.value1")
				console.log(this.value1)

				this.dialogSetRolesVisible = true;

			},
			//穿梭对话框 关闭事件  
			TransferClose() {
				this.value1 = [],
					this.Transferdata = []
			},

			//穿梭框右侧数据发生改变时
			async TestClick() {
				this.AddRoleIds.forEach(async (item) => {
					const {
						data: res4
					} = await this.$http.post(
						"/api/api/AddUserToRole", {
							uId: this.Uid,
							rId: item
						});
					if (!res4.success) {
						return this.$message.error('添加用户角色失败!')
					}
					this.$message.success('添加用户角色成功!')

				});
				this.RomoveRoleIds.forEach(async (item) => {

					const {
						data: res5
					} = await this.$http.post(
						"/api/api/RemoveUserFromRole", {
							uId: this.Uid,
							rId: item
						})

					if (res5.success !== true) {
						return this.$message.error('移除用户角色失败!')
					}
					this.$message.success('移除用户角色成功!')
				});
			},
			RightClick(e) {
				console.log("右侧");
				console.log(e);

				this.RomoveRoleIds = e;
			},
			LeftCilck(e) {
				console.log("左侧");
				console.log(e);
				this.AddRoleIds = e;

			},

			//获取当前用户所拥有的角色
			async GetRoleListById(id) {
				//参数，根据当前用户id，获取
				const {
					data: res //通过id获取用户所拥有的角色接口
				} = await this.$http.post("", {
					id: 123
				});
				if (res.meta.status !== 200) {
					return this.$message.error('获取用户列表失败!')
				}
				console.log(res.data.data);
				this.RoleList = res.data.data;
			},
			/*	显示到页面之前还有一步操作，或者说一种另类的思路，因为
			  显示到左边的，即 用户没有拥有的角色   我的思路是先获取所有的角色，放到一个数组里面
			  然后获取用户所拥有的，把拥有的去除，
			  
			  换个思路 2、分别获取当前用户所拥有的，还有不曾拥有的显示到页面上，
			  这种上学期有过类似的操作，不过可行性也不是很高，
			  
			  总结 我两种现在都不会写
			  var queryResult = from p in db.Products
			  where ! (new int?[] {1,2}).Contains(p.CategoryID)
			  select p;
			  不过现在是前台，不用考虑那么多
			  直接上代码
			  */
			async GetUNRoleListById(id) {
				//参数，根据当前用户id，获取当前用户所没有的用户
				const {
					data: res //通过id获取用户所没有的角色接口
				} = await this.$http.post("", {
					id: 123
				});
				if (res.meta.status !== 200) {
					return this.$message.error('获取用户列表失败!')
				}
				console.log(res.data.data);
				this.RoleList = res.data.data;
			},

			async AddRoleList(ids) {
				//参数，选中角色id集合
				const {
					data: res //更新的接口 添加进当前用户拥有
				} = await this.$http.post("", {
					id: this.AddList
				});
				if (res.meta.status !== 200) {
					return this.$message.error('获取用户列表失败!')
				}
				console.log(res.data.data);
				this.RoleList = res.data.data;
			},
			async RemoveRoleList(ids) {
				//参数，选中角色id集合
				const {
					data: res //更新的接口 移除用户拥有的角色
				} = await this.$http.post("", {
					id: this.RemoveList
				});
				if (res.meta.status !== 200) {
					return this.$message.error('获取用户列表失败!')
				}
				console.log(res.data.data);
				this.RoleList = res.data.data;
			},

			//重置密码
			async resetPwd(id) {
				console.log("重置密码");
				const {
					data: res
				} = await this.$http.post(
					`users/${userinfo.id}/state/${userinfo.mg_state}`
				)
				if (res.meta.status !== 200) {
					userinfo.mg_state = !userinfo.mg_state
					return this.$message.error('更新用户状态失败!')
				}
				this.$message.success('更新用户状态成功！')
			},
			//锁定用户
			//解锁用户
			async userStateChanged(userinfo) {
				console.log(userinfo)
				const {
					data: res
				} = await this.$http.put(
					`users/${userinfo.id}/state/${userinfo.mg_state}`
				)
				if (res.meta.status !== 200) {
					userinfo.mg_state = !userinfo.mg_state
					return this.$message.error('更新用户状态失败!')
				}
				this.$message.success('更新用户状态成功！')
			},

			//展示分配角色的对话框
			async setRole(userInfo) {
				this.userInfo = userInfo
				//在展示对话框之前，获取所有角色的列表
				const {
					data: res
				} = await this.$http.get('roles')
				if (res.meta.status !== 200) {
					return this.$message.error('获取角色列表失败!')
				}
				this.rolesList = res.data
				this.setRoleDialogVisible = true
			},
			//点击按钮，分配角色
			async saveRoleInfo() {
				if (!this.selectedRoleId) {
					return this.$message.error('请选择要分配的角色')
				}
				const {
					data: res
				} = await this.$http.put(
					`users/${this.userInfo.id}/role`, {
						rid: this.selectedRoleId,
					}
				)
				if (res.meta.status !== 200) {
					return this.$message.error('更新角色失败！')
				}
				this.$message.success('更新角色成功!')
				this.getUserList()
				this.setRoleDialogVisible = false
			},
			//监听分配角色对话框的关闭事件
			setRoleDialogClosed() {
				this.selectedRoleId = ''
				this.userInfo = {}
			},
		},
	}
</script>
<style lang="less" scoped>
</style>
